<script setup lang="ts">
import { useMsg } from "@/store/useMsg";
import { storeToRefs } from "pinia";
import defaultHead from "@/assets/app-mj.png";
import { formatDate2 } from "@/utils/func";
import { computed } from "vue";
import { useUser } from "@/store/useUser";

const msgStore = useMsg();
const userStore = useUser();
const { getCurrentTalkInfo, currentImKey } = storeToRefs(msgStore);

const defaultProps = defineProps({
  talkItem: {
    type: Object,
    default: {},
  },
  activeUser: {
    type: Object,
    default: {},
  },
});
const formUser = computed(() => {
  const user = userStore.getUserInfo;
  const imKey = user.uimKey;
  return defaultProps.talkItem.user === imKey
    ? defaultProps.talkItem.toUser
    : defaultProps.talkItem.user;
});
// 消息内容
const lastMsg = computed(() => {
  if (!defaultProps.talkItem.lastMessage || !defaultProps.talkItem.lastMessage.content) {
    return "";
  }
  const contentType = defaultProps.talkItem.lastMessage.contentType;
  if (contentType === 1) {
    return defaultProps.talkItem.lastMessage.content;
  }
  if (contentType === 2) {
    return "[图片]";
  }
  if (contentType === 4) {
    return defaultProps.talkItem.lastMessage.content;
  }
  if (contentType === 5) {
    return "[视频]";
  }
  if (contentType === 6) {
    return "[文件]";
  }
  if (contentType === 7) {
    return "[加价申请]";
  }
  if (contentType === 8) {
    return "[分享服务]";
  }
  if (contentType === 10) {
    return "[邀请支付]";
  }
  return "";
});

// 开始聊天
const handleClick = () => {
  msgStore.setCurrentImKey(defaultProps.talkItem.imKey);
};
</script>

<template>
  <div
    class="talk-user"
    :class="{ active: currentImKey === defaultProps.talkItem.imKey }"
    @click="handleClick"
  >
    <div class="head">
      <el-badge
        :value="msgStore.getTalkNoReadMsgNum(formUser)"
        :hidden="msgStore.getTalkNoReadMsgNum(formUser) === 0"
        class="item"
      >
        <el-image :src="defaultProps.talkItem.avatar" alt="" class="head-img" fit="cover">
          <template #error>
            <img :src="defaultHead" alt="" class="head-img" />
          </template>
        </el-image>
      </el-badge>
      <template
        v-if="
          defaultProps.talkItem.userType !== 4 && defaultProps.talkItem.userType !== 3
        "
      >
        <span v-if="defaultProps.talkItem.online" class="online"></span>
        <span v-else class="offline"></span>
      </template>
    </div>
    <div class="talk-info">
      <div class="user">
        <span class="name">{{ defaultProps.talkItem.userName }}</span>
        <span class="time">{{ formatDate2(defaultProps.talkItem.updateTime) }}</span>
      </div>
      <div class="last-msg">{{ lastMsg }}</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.talk-user {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 12px 12px 12px 12px;
  cursor: pointer;
  &.active {
    background: rgba(25, 30, 40, 0.03);
  }
  &:hover {
    background: rgba(25, 30, 40, 0.03);
  }
  .head {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    position: relative;
    margin-right: 8px;
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
    .head-img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
    }
    span {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 10px;
      height: 10px;
      box-shadow: 0px 0px 8px 0px rgba(11, 13, 18, 0.08);
      border-radius: 100px 100px 100px 100px;
      border: 2px solid #ffffff;
      &.online {
        background: #1dbf73;
      }
      &.offline {
        background: #ccc;
      }
    }
  }
  .talk-info {
    flex: 1;
    .user {
      display: flex;
      align-items: center;
      margin-bottom: 6px;
      .name {
        flex: 1;
        color: #191e28;
        font-weight: bold;
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .time {
        color: rgba(25, 30, 40, 0.6);
        font-size: 12px;
      }
    }
    .last-msg {
      font-size: 12px;
      color: rgba(25, 30, 40, 0.6);
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      max-width: 164px;
    }
  }
}
</style>
